import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
import { NgForm } from '@angular/forms';

import { Hero } from '../shared/hero.model';
import { Power } from '../shared/power.model';

// Template-driven forms

@Component({
    selector: 'hero-form',
    templateUrl: './hero-form.component.html',
    styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent implements OnChanges {
    // You can get the object instance by different ways
    powers = [
        new Power(1, 'Really Smart'),
        { id: 2, name: 'Super Flexible' },
        { id: 3, name: 'Super Hot' },
        { id: 4, name: 'Weather Changer' }
    ];

    model: Hero = new Hero(18, 'Dr IQ', this.powers[2], 'Chuck Overstreet');
    submitted: boolean = false;

    @Input() title = 'I am a title';

    // This 'set' will receive every change even during user inputs.
    // set title(str: string) {
    //     this.logger.info(str);
    // }

    constructor() { }

    // ngOnChanges ONLY works with parent-child mode.
    ngOnChanges(changes: SimpleChanges): void {
        // this.logger.info(`Prechange: ${changes.title.previousValue}. Postchange: ${changes.title.currentValue}`);
    }

    onPowerChange(value: Power): void {
        if (value) {
            
        }
    }

    onSubmit(heroForm: NgForm): void {
        if (heroForm && heroForm.valid) {
            this.submitted = true;
        }
    }

    newHero(): void {
        /* IMPORTANT: IF YOU CALL heroForm.reset() IN THE HTML, THAT MEANS ALL THE INPUT VALUES WILL BE RESTORED TO NULL. */
        /* WHATEVER YOU DO TO THE this.model VARIABLE IN THIS FUNCTION. ALL THE PROPERTY VALUES YOU ASSIGNED WILL BE OVERRIDED SILENTLY. */
        /* WHY WE USE heroForm.reset() BECAUSE WE WANT TO RESET THE form pristine PROPERTY SOMETIMES TO AVOID THE ERROR MESSAGE DISPLAY AFTER THE BUTTON CLICKS. */
        /* DO IT WISELY BASED ON YOUR OWN JUDGEMENT. */

        // this.model = new Hero(0, null, null, null);
        // this.model = new Hero(0, 'New Hero', this.powers[0], '');
        // this.model = null;
    }

    // get diagnostic() {
    //     return JSON.stringify(this.model);
    // }
}